<template>
  <div class="base-table">
    <!-- 表格工具栏 -->
    <div v-if="showToolbar" class="base-table__toolbar">
      <div class="base-table__toolbar-left">
        <slot name="toolbar-left" />
      </div>
      <div class="base-table__toolbar-right">
        <slot name="toolbar-right" />
      </div>
    </div>

    <!-- 表格 -->
    <el-table
      ref="tableRef"
      :data="data"
      :loading="loading"
      :height="height"
      :max-height="maxHeight"
      :stripe="stripe"
      :border="border"
      :size="size"
      :row-key="rowKey"
      :default-sort="defaultSort"
      :show-header="showHeader"
      :highlight-current-row="highlightCurrentRow"
      :row-class-name="rowClassName"
      v-bind="$attrs"
      @selection-change="handleSelectionChange"
      @sort-change="handleSortChange"
      @row-click="handleRowClick"
    >
      <!-- 选择列 -->
      <el-table-column
        v-if="showSelection"
        type="selection"
        width="50"
        align="center"
        fixed="left"
      />

      <!-- 序号列 -->
      <el-table-column
        v-if="showIndex"
        type="index"
        label="序号"
        width="60"
        align="center"
        fixed="left"
      />

      <!-- 数据列 -->
      <slot />

      <!-- 操作列 -->
      <el-table-column
        v-if="showActions"
        label="操作"
        :width="actionWidth"
        align="center"
        fixed="right"
      >
        <template #default="{ row, $index }">
          <slot name="actions" :row="row" :index="$index" />
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div v-if="showPagination" class="base-table__pagination">
        <el-pagination
          :current-page="currentPage"
          :page-size="pageSize"
        :total="total"
        :page-sizes="pageSizes"
        :layout="paginationLayout"
        :background="paginationBackground"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import type { TableInstance } from 'element-plus'

interface Props {
  data: any[]
  loading?: boolean
  height?: string | number
  maxHeight?: string | number
  stripe?: boolean
  border?: boolean
  size?: 'large' | 'default' | 'small'
  rowKey?: string | ((row: any) => string)
  defaultSort?: { prop: string; order: 'ascending' | 'descending' }
  showHeader?: boolean
  highlightCurrentRow?: boolean
  rowClassName?: string | (({ row, rowIndex }: { row: any; rowIndex: number }) => string)
  
  // 工具栏
  showToolbar?: boolean
  
  // 选择
  showSelection?: boolean
  
  // 序号
  showIndex?: boolean
  
  // 操作列
  showActions?: boolean
  actionWidth?: string | number
  
  // 分页
  showPagination?: boolean
  total?: number
  currentPage?: number
  pageSize?: number
  pageSizes?: number[]
  paginationLayout?: string
  paginationBackground?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  loading: false,
  stripe: true,
  border: true,
  size: 'default',
  showHeader: true,
  highlightCurrentRow: false,
  showToolbar: true,
  showSelection: false,
  showIndex: false,
  showActions: false,
  actionWidth: 120,
  showPagination: true,
  total: 0,
  currentPage: 1,
  pageSize: 10,
  pageSizes: () => [10, 20, 50, 100],
  paginationLayout: 'total, sizes, prev, pager, next, jumper',
  paginationBackground: true
})

const emit = defineEmits<{
  'update:currentPage': [page: number]
  'update:pageSize': [size: number]
  'selection-change': [selection: any[]]
  'sort-change': [sort: { prop: string; order: string }]
  'row-click': [row: any, column: any, event: Event]
  'size-change': [size: number]
  'current-change': [page: number]
}>()

const tableRef = ref<TableInstance>()

// 处理选择变化
const handleSelectionChange = (selection: any[]) => {
  emit('selection-change', selection)
}

// 处理排序变化
const handleSortChange = (sort: { prop: string; order: string }) => {
  emit('sort-change', sort)
}

// 处理行点击
const handleRowClick = (row: any, column: any, event: Event) => {
  emit('row-click', row, column, event)
}

// 处理页码变化
const handleCurrentChange = (page: number) => {
  emit('update:currentPage', page)
  emit('current-change', page)
}

// 处理页大小变化
const handleSizeChange = (size: number) => {
  emit('update:pageSize', size)
  emit('size-change', size)
}

// 清除选择
const clearSelection = () => {
  tableRef.value?.clearSelection()
}

// 切换选择
const toggleRowSelection = (row: any, selected?: boolean) => {
  tableRef.value?.toggleRowSelection(row, selected)
}

// 暴露方法
defineExpose({
  clearSelection,
  toggleRowSelection
})
</script>

<style scoped lang="scss">
.base-table {
  &__toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding: 12px 0;
  }

  &__pagination {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
    padding: 12px 0;
  }
}
</style>
